<template>
  <div style="width:100%;height:100%;display: flex;">
    <div class="column1">
      <div class="title">个人中心</div>
      <input type="text" class="input" placeholder="username">
      <input type="text" class="input" placeholder="nickname">
      <select id="gender" name="gender" class="input select" style="width:100%;padding-left: 45px;">
        <option value="" selected disabled>sex</option>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      <input type="text" class="input" placeholder="mobile phone">

    </div>
    <div class="column2">
      <img src="https://media.istockphoto.com/id/1498666644/photo/black-hole-clouds-high-quality-render.webp?b=1&s=170667a&w=0&k=20&c=HwqlP4V9JQlNpHO2BI4SDy_DN7b7nw6BwDA4YtFg2tU=" class="avatar">
      <p style="text-align: center;margin-top:50px;">点击上传图片</p>
      <input type="text" class="input" placeholder="email">
      <input type="text" class="input" placeholder="ID">
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import { useRouter,useRoute } from 'vue-router'


// 使用useRoute方法获取路由信息
const route = useRoute()
const router = useRouter()

onMounted(()=>{
  console.log('user-info')
})
</script>

<style scoped>
.column1 {
  display: inline-block;
  /*border:1px dashed black;*/
  width:48%;
  height:100%;
  margin-right: 5%;
}
.column2 {
  display: inline-block;
  /*border:1px dashed black;*/
  width:34%;
  height:100%;

}
.title {
  margin-top: 34%;
  font-size: 52px;
  font-weight: 300;
  padding-bottom: 5px;
  border-bottom:3px solid #14B86E;
  margin-bottom: 10%;
}
.input {
  border:0;
  background-color: #FAF9F7;
  border-bottom:3px solid #888888;
  width:calc(100% - 20px);
  height:50px;
  margin-top: 12%;
  font-size: 18px;
  color:#52575C;
  padding-left: 20px;
}
.input:focus {
  outline: none;
}
.input::-webkit-input-placeholder {
  text-indent: 30px;
}
.input:focus::placeholder {
  transform: scale(0.8) translateY(-100%);
  text-indent: 0px;
}
.input:focus {
  border-bottom:3px solid #14B86E;
}
.avatar {
  width:150px;
  height:150px;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  margin-top: 90%;
}
</style>
